<template>
  <div class="user-area">
    <template v-if="dataInfo.some(e => e.targetType == 1)">
      <div class="second-title">
        <div class="point"></div>
        <span>主贷人</span>
      </div>
      <el-row :gutter="10"
              v-if="orderInfo && orderInfo.customerName">
        <el-col :span="3">
          <div class="content-title">
            <span>姓名</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ orderInfo.customerName }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10"
              v-if="orderInfo && orderInfo.customerPhone">
        <el-col :span="3">
          <div class="content-title">
            <span>手机号</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ orderInfo.customerPhone }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10"
              v-if="orderInfo && orderInfo.mainIdCardNum">
        <el-col :span="3">
          <div class="content-title">
            <span>身份证号</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ orderInfo.mainIdCardNum }}</span>
        </el-col>
      </el-row>
      <el-row v-for="item in main"
              :key="item.attrId"
              :gutter="10">
        <el-col v-if="item.attrId != 55 && item.attrId != 14"
                :span="3">
          <div class="content-title">
            <span>{{item.explain}}</span>
          </div>
        </el-col>
        <el-col v-if="item.type == 4 || item.type == 5"
                :span="19">
          <span>{{ item.strValue}}</span>
        </el-col>
        <el-col v-else-if="item.type == 7"
                :span="19">
          <video-view-up :upload-data="{videoName: 'video/' + orderInfo.customerId }"
                         :data-obj.sync="item.objValue"
                         :can-upload="!isInfo"></video-view-up>
        </el-col>
        <el-col v-else
                :span="19">
          <div>
            <pic-view :pic-url-list.sync="item.objValue.urls"
                      upload-class="lang-upload"
                      :pic-name-list.sync="item.objValue.names"
                      :max-size="item.type == 1?2:(item.type == 2?1:null)"
                      :upload-data="{ picName: 'customer/' + orderInfo.customerId }"
                      :upload-type="isInfo"
                      @showImg="showDataImg"></pic-view>
          </div>
        </el-col>
      </el-row>
    </template>
    <template v-if="dataInfo.some(e => e.targetType == 2)">
      <div class="second-title">
        <div class="point"></div>
        <span>配偶</span>
      </div>
      <el-row :gutter="10"
              v-if="orderInfo && orderInfo.mateIdCardNum">
        <el-col :span="3">
          <div class="content-title">
            <span>身份证号</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ orderInfo.mateIdCardNum }}</span>
        </el-col>
      </el-row>
      <el-row v-for="item in mate"
              :key="item.attrId"
              :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>{{item.explain}}</span>
          </div>
        </el-col>
        <el-col v-if="item.type == 4 || item.type == 5"
                :span="19">
          <span>{{ item.strValue}}</span>
        </el-col>
        <el-col v-else-if="item.type == 7"
                :span="19">
          <video-view-up :upload-data="{videoName: 'video/' + orderInfo.customerId }"
                         :data-obj.sync="item.objValue"
                         :can-upload="!isInfo"></video-view-up>
        </el-col>
        <el-col v-else
                :span="19">
          <div>
            <pic-view :pic-url-list.sync="item.objValue.urls"
                      upload-class="lang-upload"
                      :pic-name-list.sync="item.objValue.names"
                      :max-size="item.type == 1?2:(item.type == 2?1:null)"
                      :upload-data="{ picName: 'customer/' + orderInfo.customerId }"
                      :upload-type="isInfo"
                      @showImg="showDataImg"></pic-view>
          </div>
        </el-col>
      </el-row>
    </template>
    <template v-if="dataInfo.some(e => e.targetType == 3)">
      <div class="second-title">
        <div class="point"></div>
        <span>担保人</span>
      </div>
      <el-row :gutter="10"
              v-if="orderInfo && orderInfo.guarantorIdCardNum">
        <el-col :span="3">
          <div class="content-title">
            <span>身份证号</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ orderInfo.guarantorIdCardNum }}</span>
        </el-col>
      </el-row>
      <el-row v-for="item in guarantor"
              :key="item.attrId"
              :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>{{item.explain}}</span>
          </div>
        </el-col>
        <el-col v-if="item.type == 4 || item.type == 5"
                :span="19">
          <span>{{ item.strValue}}</span>
        </el-col>
        <el-col v-else-if="item.type == 7"
                :span="19">
          <video-view-up :upload-data="{videoName: 'video/' + orderInfo.customerId }"
                         :data-obj.sync="item.objValue"
                         :can-upload="!isInfo"></video-view-up>
        </el-col>
        <el-col v-else
                :span="19">
          <div>
            <pic-view :pic-url-list.sync="item.objValue.urls"
                      upload-class="lang-upload"
                      :pic-name-list.sync="item.objValue.names"
                      :max-size="item.type == 1?2:(item.type == 2?1:null)"
                      :upload-data="{ picName: 'customer/' + orderInfo.customerId }"
                      :upload-type="isInfo"
                      @showImg="showDataImg"></pic-view>
          </div>
        </el-col>
      </el-row>
    </template>
    <template v-if="dataInfo.some(e => e.targetType == 4)">
      <div class="second-title">
        <div class="point"></div>
        <span>担保人配偶</span>
      </div>
      <el-row :gutter="10"
              v-if="orderInfo && orderInfo.guarantorMateIdCardNum">
        <el-col :span="3">
          <div class="content-title">
            <span>身份证号</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ orderInfo.guarantorMateIdCardNum }}</span>
        </el-col>
      </el-row>
      <el-row v-for="item in guarantorMate"
              :key="item.attrId"
              :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>{{item.explain}}</span>
          </div>
        </el-col>
        <el-col v-if="item.type == 4 || item.type == 5"
                :span="19">
          <span>{{ item.strValue}}</span>
        </el-col>
        <el-col v-else-if="item.type == 7"
                :span="19">
          <video-view-up :upload-data="{videoName: 'video/' + orderInfo.customerId }"
                         :data-obj.sync="item.objValue"
                         :can-upload="!isInfo"></video-view-up>
        </el-col>
        <el-col v-else
                :span="19">
          <div>
            <pic-view :pic-url-list.sync="item.objValue.urls"
                      upload-class="lang-upload"
                      :pic-name-list.sync="item.objValue.names"
                      :max-size="item.type == 1?2:(item.type == 2?1:null)"
                      :upload-data="{ picName: 'customer/' + orderInfo.customerId }"
                      :upload-type="isInfo"
                      @showImg="showDataImg"></pic-view>
          </div>
        </el-col>
      </el-row>
    </template>
    <template v-if="dataInfo.some(e => e.targetType == 9)">
      <div class="second-title">
        <div class="point"></div>
        <span>车辆</span>
      </div>
      <el-row v-for="item in car"
              :key="item.attrId"
              :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>{{item.explain}}</span>
          </div>
        </el-col>
        <el-col v-if="item.type == 4 || item.type == 5"
                :span="19">
          <span>{{ item.strValue}}</span>
        </el-col>
        <el-col v-else-if="item.type == 7"
                :span="19">
          <video-view-up :upload-data="{videoName: 'video/' + orderInfo.customerId }"
                         :data-obj.sync="item.objValue"
                         :can-upload="!isInfo"></video-view-up>
        </el-col>
        <el-col v-else
                :span="19">
          <div>
            <pic-view :pic-url-list.sync="item.objValue.urls"
                      upload-class="lang-upload"
                      :pic-name-list.sync="item.objValue.names"
                      :max-size="item.type == 1?2:(item.type == 2?1:null)"
                      :upload-data="{ picName: 'customer/' + orderInfo.customerId }"
                      :upload-type="isInfo"
                      @showImg="showDataImg"></pic-view>
          </div>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<style lang="scss">
</style>

<script>
import '@/style/common.scss'
import '@/style/info.scss'
import picView from '@/components/pic-viewer-up'
import videoViewUp from '@/components/video-viewer-up/base'
import { devBaseURL } from '@/utils/http'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      main: [],
      mate: [],
      guarantor: [],
      guarantorMate: [],
      car: []
    }
  },
  created() {
    this.initialized()
  },
  watch: {
    dataInfo: {
      handler: function() {
        this.$emit('update:dataInfo', this.dataInfo)
      }
    }
  },
  props: {
    dataInfo: {
      type: Array,
      default: () => { return [] }
    },
    orderInfo: {
      type: Object,
      default: () => { return {} }
    },
    isInfo: {
      type: Boolean,
      default: false
    }
  },
  components: { picView, videoViewUp },
  methods: {
    initialized() {
      this.main = this.dataInfo.filter(e => e.targetType === 1)
      this.mate = this.dataInfo.filter(e => e.targetType === 2)
      this.guarantor = this.dataInfo.filter(e => e.targetType === 3)
      this.guarantorMate = this.dataInfo.filter(e => e.targetType === 4)
      this.car = this.dataInfo.filter(e => e.targetType === 9)
    },
    showDataImg(url) {
      this.$emit('show', url)
    }
  }
}
</script>

